import "./Skeleton.less";

import { View } from "@tarojs/components";
import Card from "../common/Card";
import ByRow from "../ui/ByRow";
import ByCol from "../ui/ByCol";

const SkeletonItem = ({ className }: { className?: string }) => {
  return (
    <View className={`shadow-pass mb-1 h-[1.5em] bg-page ${className}`}></View>
  );
};

const SkeletonAvatar = ({ className }: { className?: string }) => {
  return (
    <View
      className={`shadow-pass w-[100px] h-[100px] rounded-full bg-white ${className}`}
    />
  );
};

const Skeleton = ({ avatar, rows = 2 }: { avatar: boolean; rows?: number }) => {
  const list = new Array(rows).fill(rows);

  return (
    <Card className="mb-3">
      <ByRow align="center">
        {avatar && (
          <ByCol span={"none"} className="mr-2">
            <SkeletonAvatar />
          </ByCol>
        )}

        <ByCol span={"auto"}>
          <SkeletonItem className="w-1/2" />
          {list.map((_, index) => (
            <SkeletonItem key={index} />
          ))}
        </ByCol>
      </ByRow>
    </Card>
  );
};

export const SkeletonGroup = ({
  count = 3,

  ...rest
}: {
  avatar?: boolean;
  count?: number;
  rows?: number;
}) => {
  const list = new Array(count).fill(count);
  return list.map((_, index) => <Skeleton key={index} {...rest} />);
};

export default Skeleton;
